<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Intelligent Route for Carrier</title>
<link rel="icon" type="image/gif" href="./resources/images/animated_favicon1.gif">
	<!-- link rel="shortcut icon" href="favicon.ico" -->
	
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="./resources/tileoverlay_uncompressed.js"></script>
<script type="text/javascript" src="./resources/googleAPI.js"></script>
<script type="text/javascript" src="./resources/traffyAPI.js"></script>
<script type="text/javascript" src="./resources/jquery.js"></script>
<script type="text/javascript" src="./resources/jquery-ui-1.8.12.custom.min.js"></script>
<link href="./resources/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />

<style type="text/css">
	html {
		height: 100%
	}
	
	body {
		background-color: #EEEEEE;
		height: 100%;
		width: 100%;
		margin: 0px;
		padding: 0px;
		color: #333333;
	}
	
	#map_canvas {
		border:3px solid #555555;
		height:400px;
		margin-left: 20%;
		margin-right: 20%;
	}
	.box { 
	  background: #D3D3D3; 
	}
	.boxtop { 
	  background: url(./resources/images/ne.gif) no-repeat top right; 
	}
	.boxtop div { 
	  font-size: 0;
	  height: 20px; 
	  background: url(./resources/images/nw.gif) no-repeat top left; 
	}
	.boxbottom { 
	  background: url(./resources/images/se.gif) no-repeat bottom right; 
	}
	.boxbottom div { 
	  font-size: 0;
	  height: 20px; 
	  background: url(./resources/images/sw.gif) no-repeat bottom left; 
	}
	.boxcontent {
	  padding: 0px 20px 0px 20px;
	}
	.button {
	    padding: 5px 10px;
	    display: inline;
	    background: #777 url(./resources/images/button.png) repeat-x bottom;
	    border: none;
	    color: #fff;
	    cursor: pointer;
	    font-weight: bold;
	    border-radius: 5px;
	    -moz-border-radius: 5px;
	    -webkit-border-radius: 5px;
	    text-shadow: 1px 1px #666;
    }
	.button:hover {
    	background-position: 0 -48px;
    }
	.button:active {
	    background-position: 0 top;
	    position: relative;
	    top: 1px;
	    padding: 6px 10px 4px;
    }
    .button.red { background-color: #e50000; }
	.button.purple { background-color: #9400bf; }
	.button.green { background-color: #58aa00; }
	.button.orange { background-color: #ff9c00; }
	.button.blue { background-color: #2c6da0; }
	.button.black { background-color: #333; }
	.button.white { background-color: #fff; color: #000; text-shadow: 1px 1px #fff; }
	.button.small { font-size: 75%; padding: 3px 7px; }
	.button.small:hover { background-position: 0 -50px; }
	.button.small:active { padding: 4px 7px 2px; background-position: 0 top; }
	.button.large { font-size: 125%; padding: 7px 12px; }
	.button.large:hover { background-position: 0 -35px; }
	.button.large:active { padding: 8px 12px 6px; background-position: 0 top; }
	
	.ui-autocomplete {
		max-height: 100px;
		overflow-y: auto;
		/* prevent horizontal scrollbar */
		overflow-x: hidden;
		/* add padding to account for vertical scrollbar */
		padding-right: 20px;
	}
</style>

<title>Schedule On Map</title>
<script type="text/javascript">
var markersArray = [];
var geocoder;
	function init() {
		$("#radio").buttonset();
		//$("#submitButton").button();
		//$("#cancelButton").button();
		clearPin();
		var getTraffic = ""; //traffy or google
		geocoder = new google.maps.Geocoder();
		createMap(13.75055703, 100.52318573, "map_canvas", getTraffic);
		directionsDisplay.setPanel(document.getElementById("directionsPanel"));

		google.maps.event.addListener(map, 'click', function(event) {
		    placeMarker(event.latLng);
		  });
		
		 $("#address").autocomplete({
	      //This bit uses the geocoder to fetch address values
	      source: function(request, response) {
	        geocoder.geocode( {'address': request.term, 'region': "TH" }, function(results, status) {
	          response($.map(results, function(item) {
	            return {
	              label:  item.formatted_address,
	              value: item.formatted_address,
	              latitude: item.geometry.location.lat(),
	              longitude: item.geometry.location.lng()
	            }
	          }));
	        })
	      },
	      //This bit is executed upon selection of an address
	      select: function(event, ui) {
	        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
	        map.setCenter(location);
	        placeMarker(location);
	      }
	    });  
	}
	
	function placeMarker(location) {
		if(markersArray.length==0){
			var image = './resources/images/start_icon.png';
			var marker = new google.maps.Marker( {
				position :location,
				map :map,
				animation: google.maps.Animation.DROP,
			    title: (markersArray.length+1).toString(),
				icon :image
			});
		}else{
			if(markersArray.length<9){
			 var marker = new google.maps.Marker({
			      position: location, 
			      map: map,
			      animation: google.maps.Animation.DROP,
			      title: (markersArray.length+1).toString()
			  });
			}else{
				alert("Cannot add more than 9 destinations!!");
			}
		}
	 
	  
	  markersArray.push(marker);
	  
	 // map.setCenter(location);
	 
	  var dataObj = document.getElementById("latLng");
	  if(dataObj.value==""){
		  dataObj.value = dataObj.value+location;
	  }else{
		  dataObj.value = dataObj.value+"##"+location;
	  }
	}
	
	function clearPin(){
	  var dataObj = document.getElementById("latLng");
	  dataObj.value = "";
	  // Deletes all markers in the array by removing references to them
	  if (markersArray) {
	    for (i in markersArray) {
	      markersArray[i].setMap(null);
	    }
	    markersArray.length = 0;
	  }
	}
	
	function validateInput(){
		if(markersArray.length <= 1){
			alert("Please identify at least 2 destinations!!");
			return false;			
		}
	}
</script>
</head>
<body onload="init()">
	<div style="height: 0.5em">&nbsp;</div>
	<div align="center" style="font-family: sans-serif; font-size: 22px; text-shadow: 1px 1px #EEEEEE;">
		<div class='box' style="width: 60%" align="center">
		 	<div class='boxtop'><div></div></div>
		  		<div class='boxcontent'>
		  			<b>Intelligent Route for Carrier</b>
		  		</div>
		 	<div class='boxbottom'><div></div></div>
		</div>
	</div>
	<div style="height: 0.5em">&nbsp;</div>
	<div id="map_canvas"></div>
	<div style="height: 0.5em">&nbsp;</div>
	<div class="ui-widget" align="center">
		Address: <input id="address" type="text" class="ui-widget input  ui-state-default ui-corner-all " size="50">
	</div>
	<div style="height: 0.5em">&nbsp;</div>
	<div align="center" style="font-family: sans-serif; font-size: 14px;">
		<div class='box' style="width: 60%" align="center">
			<div class='boxtop'><div></div></div>
		  		<div class='boxcontent'>
			  		<div class="ui-widget">
			  			<form action="./Traffic" method="post" onsubmit="return validateInput()">
			  				<input type="hidden" name="latLng" id="latLng"/>
			  				<div id="radio">
				  				<input type="radio" id="radio1" name="strategy" value="oneway" checked="checked"/> <label for="radio1">One Way</label>
				  				<input type="radio" id="radio2" name="strategy" value="roundtrip"/> <label for="radio2">Round Trip</label>
			  				</div>
			  				<div style="height: 0.5em">&nbsp;</div>
							<!-- input type="checkbox" name="avoidTolls" value="1"/> Avoid Tolls -->
							<input class="button black" type="submit" value="Submit" id="submitButton"/>
							<input class="button black" type="button" value="Cancel" id="cancelButton" onclick="clearPin()"/>
			   			</form>
			   		</div>
		  		</div>
		 	<div class='boxbottom'><div></div></div>
		</div>
	</div>
</body>
</html>